<template>
	<div>
		<el-row class="row_top">
			<span>在 Apple Store 零售店，用你符合条件的 iPhone 来折抵换购，
				入手 iPhone XR 仅 RMB 183/月起，或 RMB 4399 起*。</span>
			<a>进一步了解 ></a>
		</el-row>


		<el-row class="row_list1">
			<label>iPad Air</label> <br />
			<span>强劲在手，无论高手新手。</span> <br />
			<a>进一步了解 ></a>
			<a>机型和价格 ></a> <br />
			<img src="./img/1-1.jpg" />
		</el-row>


		<el-row class="row_list1">
			<label>iPad mini</label> <br />
			<span>小身材，更有才。</span> <br />
			<a>进一步了解 ></a>
			<a>机型和价格 ></a> <br />
			<img src="./img/1-2.jpg" />
		</el-row>

		<el-row :gutter="10">
			<el-col span="12">
				<div class="div_left_img">
					<div class="div_text">
						<label>好戏开幕。</label> <br />
						<span>请于北京时间3月日凌晨1点，</span> <br />
						<span>到Apple美国官网观看主题演讲。</span>
					</div>

				</div>
			</el-col>

			<el-col span="12">
				<div class="div_right_img">
					<div class="div_text">
						<label>WWDC19</label> <br />
						<span>美国加州圣何塞，当地时间6月3日至7日。</span>
					</div>
				</div>
			</el-col>
		</el-row>
		
		
		<theButton></theButton>
	</div>
</template>

<script>
	import theButton from '@/views/Homework/Apple/theButton.vue'
	export default{
		data(){
			return{
				
			}
		},components:{
			theButton
		}
	}
</script>

<style scoped>
	
	.row_top {
		height: 60px;
		line-height: 60px;
		color: #333;
		font-size: 13px;
		text-align: center;
		background: #fafafa;
		margin-bottom: 15px;
		margin-top: 88px;
		
	}

	.row_top a:hover {
		padding-bottom: 3px;
		/* 设置文字距下划线的距离*/
		border-bottom: 1px solid #000000;

	}

	/* 第一个大图 */
	.row_list1 {
		text-align: center;
		background: #fafafa;
		margin-bottom: 15px;
		color: #111;
		padding-top: 30px;
	}

	.row_list1 label {
		font-size: 56px;
		font-weight: 600px;
		font-family: fantasy;
	}

	.row_list1 span {
		font-size: 27px;
		font-weight: 400px;
		line-height: 44px;
	}

	.row_list1 a {
		color: #0070c9;
		font-size: 18px;
		line-height: 44px;
		margin-left: 20px;
	}

	.row_list1 a:hover {
		padding-bottom: 3px;
		border-bottom: 1px solid #0070c9;
	}

	.row_list1 img {
		margin-top: 20px;
	}


	/* 两个在一排的图片 */
	.div_left_img {
		height: 580px;
		background: url(img/1-3.jpg);
		background-size: 100% 100%;
		margin-left: 10px;
		position: relative;
	}

	.div_right_img {
		height: 580px;
		background: url(img/1-4.jpg);
		background-size: 100% 100%;
		margin-right: 10px;
		position: relative;
	}

	.div_text {
		position: absolute;
		top: 420px;
		left: 192px;
		color: white;
		text-align: center;
	}

	.div_text label {
		font-size: 40px;
		font-weight: 600;
		line-height: 70px;
	}

	.div_text span {
		font-size: 21px;
		font-weight: 400;
	}

	
	
</style>
